<template>
<div class="contain">
   <div class="left">
    <div class="head_1">
        <el-text class="mx-1" size="small" style="margin-left:5px;">收到的消息（15）</el-text>
        <el-text class="mx-1" size="small" style="margin-right:5px;">全部显示</el-text>
    </div>
    <div class="hd">
        <div class="context" v-for="item in list" :key="item.number">
            <el-text class="text" size="small">6-13</el-text>
            <el-image class="image" :src="url" fit="fill" /><br>
        </div>
    </div>
   </div>
   <div class="right">
    <div class="head_2">
        <el-text class="text">最新消息！！！！极光医疗科技公司推出最新型康复小机器人</el-text>
    </div>
    <div class="read">
        <div class="read_a">极光医疗科技公司</div>
    </div>
   </div>
</div>
</template>

<script>
export default {
    setup(){
        let url = require('../../static/image/info_1.png')
        let list = [
            {number:1},
            {number:2},
            {number:3},
            {number:4},
            {number:5},
            {number:6},
            {number:7},
            {number:8},
            {number:9},
            {number:10},
            {number:11},
            {number:12}
        ]
        return {url,list}
    }
}
</script>

<style lang="less" scoped>
.contain{
    display: flex;
    flex-direction: row;
    .left{
        flex: 4;
        .head_1{
            height: 20px;
            background-color:lightgrey;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }
        .hd{
            height: 500px;
            overflow-x: hidden;
            overflow-y: auto;
        }
    }
    .right{
        flex: 6;
        border: 1px black solid;
        background-color:lightgrey;
        .head_2{
            height: 25px;
            display: flex;
            justify-content: center;
            align-items: center;
            .text{
                font-weight: 800;
            }
        }
        .read{
            border-radius: 10px;
            border:1px black solid;
            margin: 5px 10px;
            height: 450px;
            background-color: white;

            .read_a{
                height: 80px;
                border-bottom: 1px gray solid;
            }
        }
    }
}
.context{
    height: 50px;
    position:relative;
    border: 1px black solid;
    .image{
        height: 30px;
        width: 30px;
        position: absolute;
        top: 10px;
        left: 10px;
    }
    .text{
        position: absolute;
        top: 4px;
        right: 4px;
    }
}
</style>